<template>
    <view>
        <u-navbar fixed bgColor="transparent" :shadow="true" :bgColor="'#ffffff'" :border="true" placeholder>
            <view slot="left" class="d-flex" @click="show.showApp = true">
                <text class="d-font-28 d-m-r-10 u-line-1" style="max-width: 250rpx;">
                    {{ Array.isArray($user.ssgcxx) && $user.ssgcxx.length ? $user.ssgcxx[$appIndex].gcmc : '暂无项目' }}
                </text>
                <u-icon name="arrow-down" size="24rpx" :color="'#151C24'"></u-icon>
            </view>
            <view slot="right" @click="scan">
                <u-icon class="u-m-l-20" name="scan" size="26" :color="'#151C24'"></u-icon>
            </view>
        </u-navbar>

        <view class="d-p-b-20">
            <u-swiper circular height="350rpx" :loading="banner.length == 0" :list="banner" keyName="attachUrl"
                @change="e => (current = e.current)">
                <view slot="indicator" class="indicator">
                    <view class="indicator__dot" v-for="(item, index) in banner" :key="index"
                        :class="[index === current && 'indicator__dot--active']"></view>
                </view>
            </u-swiper>
        </view>
        <view>
            <u-grid col="4">
                <u-grid-item :customStyle="{ marginTop: '30rpx' }" @click="info">
                    <u--image src="/static/icon/icon-04.png" width="97rpx" height="97rpx"></u--image>
                    <text class="d-font-24">个人信息</text>
                </u-grid-item>
                <u-grid-item :customStyle="{ marginTop: '30rpx' }" @click="work">
                    <u--image src="/static/icon/icon-05.png" width="97rpx" height="97rpx"></u--image>
                    <text class="d-font-24">考勤</text>
                </u-grid-item>
                <u-grid-item :customStyle="{ marginTop: '30rpx' }" @click="wages">
                    <u--image src="/static/icon/icon-06.png" width="97rpx" height="97rpx"></u--image>
                    <text class="d-font-24">工资</text>
                </u-grid-item>
                <u-grid-item :customStyle="{ marginTop: '30rpx' }" @click="train">
                    <u--image src="/static/icon/icon-07.png" width="97rpx" height="97rpx"></u--image>
                    <text class="d-font-24">培训</text>
                </u-grid-item>
                <u-grid-item :customStyle="{ marginTop: '30rpx' }" @click="credit">
                    <u--image src="/static/icon/icon-08.png" width="97rpx" height="97rpx"></u--image>
                    <text class="d-font-24">信用</text>
                </u-grid-item>
            </u-grid>
        </view>
        <view class="d-p-30">
            <!-- 理论上这个应该是对应项目 先按文档走 -->
            <view class="d-m-t-20"><text class="d-font-36" style="font-weight: bold;">基本信息</text></view>
            <view class="card d-m-t-30 d-p-30">
                <view class="d-flex d-col-top" style="font-weight: bold;color: #162233;">
                    <view class="d-flex-1" style="max-width: 480rpx;">
                        <view class="d-flex">
                            <text class="d-font-36 u-line-1" style="max-width: 200rpx;">{{ $user.userName }}</text>
                            <text class="d-font-24 d-m-l-40" style="color: #ADB4BD;">{{ $user.ryzjhm | str }}</text>
                        </view>
                        <template v-if="Array.isArray($user.ssgcxx) && $user.ssgcxx.length">
                            <view class="d-flex d-font-24 d-m-t-20">
                                <text>公司</text>
                                <text class="d-m-l-20 u-line-1" style="max-width: 400rpx;">
                                    {{ Array.isArray($user.ssgcxx) && $user.ssgcxx.length ? $user.ssgcxx[$appIndex].deptName : '暂无数据源' }}
                                </text>
                            </view>
                            <view class="d-flex d-font-24 d-m-t-20">
                                <text>项目</text>
                                <text class="d-m-l-20 d-flex-1 u-line-1" style="max-width: 400rpx;">
                                    {{ Array.isArray($user.ssgcxx) && $user.ssgcxx.length ? $user.ssgcxx[$appIndex].gcmc : '暂无数据源' }}
                                </text>
                            </view>
                            <view class="d-flex d-font-24 d-m-t-20">
                                <text>班组</text>
                                <text class="d-m-l-20">
									{{ Array.isArray($user.ssgcxx) && $user.ssgcxx.length ? $user.ssgcxx[$appIndex].bzmc : '暂无数据源' }}
								</text>
                            </view>
                        </template>

                    </view>
                    <view class="d-m-t-10">
                        <u--image :src="$user.profile || '/static/image/photo.png'" width="160rpx" height="160rpx" radius="6"></u--image>
                    </view>
                </view>
                <!-- style="color: #5D6672;" -->
                <template v-if="Array.isArray($user.ssgcxx) && $user.ssgcxx.length">
                    <view class="d-flex d-font-24 d-m-t-20" v-if="$user.ssgcxx[$appIndex].ssbzzxm">
                        <text>班组长</text>
                        <text class="d-m-l-20 u-line-1" style="max-width: 180rpx;">
							{{ $user.ssgcxx[$appIndex].ssbzzxm }}
						</text>
                        <text class="d-m-l-70">电话</text>
                        <u--text class="d-m-l-20" color="#21A5F3" size="24rpx" mode="phone" call :text="$user.ssgcxx[$appIndex].ssbzzdh"></u--text>
                    </view>
                </template>
            </view>

            <view class="d-m-t-50"><text class="d-font-36" style="font-weight: bold;">考勤打卡</text></view>
            <view class="d-m-t-30" @click="signCard">
                <u--image src="/static/image/work.png" width="690rpx" height="120rpx"></u--image>
            </view>

            <view class="d-m-t-50 d-flex">
                <text class="d-font-36 d-flex-1" style="font-weight: bold;">考勤记录</text>
                <view>
                    <u-button text="查看详情" shape="circle" size="mini" :customStyle="{
							color: '#FFB61D',
							borderColor: '#FFB61D'
						}" @click="work"></u-button>
                </view>
            </view>

            <view class="card d-m-t-30 d-p-30">
                <view class="d-flex">
                    <text class="d-font-32" style="font-weight: bold;">当前月份</text>
                    <text class="d-font-36 d-m-l-20 d-flex-1" style="font-weight: bold;">{{ form.nym }}</text>
                    <view @click="show.showDate = true" class="d-font-24 d-flex d-row-center d-col-center"
                        style="color: #505355;">
                        <text class="d-m-r-20">{{ form.ym }}</text>
                        <u-icon style="position: relative;top: 4rpx;" name="arrow-down" size="24rpx" color="#DFDFDF">
                        </u-icon>
                    </view>
                </view>

                <view class="d-flex d-text-center d-m-t-30">
                    <view class="d-flex-1" style="color: #162233;">
                        <view>
                            <text style="font-size: 52rpx;font-weight: bold;">{{ psatd ? psatd.day : 0 }}</text>
                            <text class="d-font-20">天</text>
                        </view>
                        <text class="d-font-24">应出勤</text>
                    </view>
                    <view class="d-flex-1" style="color: #162233;">
                        <view>
                            <text style="font-size: 52rpx;font-weight: bold;">{{ psatd ? psatd.atdStaffs : 0 }}</text>
                            <text class="d-font-20">天</text>
                        </view>
                        <text class="d-font-24">实际出勤</text>
                    </view>
                    <view class="d-flex-1" style="color: #162233;">
                        <view>
                            <text
                                style="font-size: 52rpx;font-weight: bold;color: #E94343;">{{ psatd ? psatd.unatdStaffs : 0 }}</text>
                            <text class="d-font-20">天</text>
                        </view>
                        <text class="d-font-24">考勤异常</text>
                    </view>
                </view>
            </view>

            <view class="card d-m-t-30 d-p-30">
                <view><text class="d-font-32" style="font-weight: bold;">当日考勤</text></view>
                <view class="d-flex d-m-t-20" style="color: #5D6672;">
                    <text class="d-flex-1 d-font-28">入场时间 {{ nowAd && nowAd.zzjcsj ? nowAd.zzjcsj : '无记录' }}</text>
                    <text class="d-font-28">出场时间 {{ nowAd && nowAd.zwccsj ? nowAd.zwccsj : '无记录' }}</text>
                </view>
            </view>

            <view class="d-m-t-50"><text class="d-font-36" style="font-weight: bold;">工资发放情况</text></view>
            <template v-if="!nowWages || nowWages.length <= 0">
                <view class="card d-m-t-20 d-p-80">
                    <u-empty mode="list" icon="/static/image/none.png" text="暂无记录"></u-empty>
                </view>
            </template>
            <template v-else>
                <view class="card d-m-t-30 d-p-30" @click="wages" v-for="(item, index) in nowWages" :key="index">
                    <view class="d-flex" style="color: #5D6672;">
                        <view class="d-flex-1 d-font-28">
                            <text style="font-weight: bold;">发放月份</text>
                            <text
                                class="d-m-l-20">{{ item.ffgzny ? $moment(item.ffgzny).format('YYYY年MM月') : '无' }}</text>
                        </view>
                        <view class="d-font-28" style="width: 260rpx;">
                            <text style="font-weight: bold;">发放日期</text>
                            <text
                                class="d-m-l-20">{{ item.createTime ? $moment(item.createTime).format('MM月DD日') : '无' }}</text>
                        </view>
                    </view>
                    <view class="d-flex d-m-t-20" style="color: #5D6672;">
                        <view class="d-flex-1 d-font-28">
                            <text style="font-weight: bold;">发放金额</text>
                            <text class="d-m-l-20">{{ item.sfje }}元</text>
                        </view>
                        <view class="d-font-28" style="width: 260rpx;">
                            <text style="font-weight: bold;">实发工资</text>
                            <text class="d-m-l-20">{{ item.sfje }}元</text>
                        </view>
                    </view>
                </view>
            </template>
        </view>
        <u-datetime-picker mode="year-month" :show="show.showDate" @cancel="show.showDate = false" @confirm="setYM"
            :maxDate="form.time" closeOnClickOverlay :value="form.stime"></u-datetime-picker>
        <u-picker :show="show.showApp" title="请选择" :columns="project" keyName="gcmc" :defaultIndex="projectIndex"
            @cancel="show.showApp = false" @close="show.showApp = false" closeOnClickOverlay @confirm="setApp">
        </u-picker>
    </view>
</template>

<script>
import { fileList, getPsatd, getNowAd, homeWages } from "../../common/api.js";

export default {
    data() {
        return {
            current: 0,
            show: {
                showDate: false,
                showApp: false,
            },
            form: {
                date: "",
                ym: "",
                time: "",
                md: "",
                stime: "", // 选中的值
            },
            banner: [],
            psatd: null, // 月考勤
            nowAd: null, // 日考勤
            nowWages: null, // 工资
            project: [],
            projectIndex: [0],
        };
    },
    onLoad() {
        this.project = [this.$user.ssgcxx];
        this.projectIndex = [this.$appIndex];
    },
    onShow() {
        this.form.time = new Date().getTime();
        if (!this.form.stime) {
            this.form.stime = this.form.time;
        }
        this.form.date = uni.$u.timeFormat(this.form.time, "yyyy-mm-dd");
        this.form.ym = uni.$u.timeFormat(this.form.time, "yyyy-mm");
        this.form.nym = uni.$u.timeFormat(this.form.time, "yyyy-mm");
        this.init();
    },
    methods: {
        init() {
            // 轮播
            fileList({
                params: {
                    ywlx: "focus_map",
                    bid: "focus_map_20210000001",
                    attachType: "focus_map",
                },
            }).then((e) => {
                // console.log('轮播',e.rows)
                this.banner = e.rows;
                if (!this.$user.ssgcxx) {
                    return false;
                }
                // 考勤
                this.getPsatd();
                // 当日考勤
                this.getNowAd();
                // 工资
                this.homeWages();
            });
        },
        getPsatd() {
            // 考勤记录
            getPsatd({
                params: {
                    bzid: this.$user.ssgcxx[this.$appIndex].bzid, // 班组id
                    rybh: this.$user.ssgcxx[this.$appIndex].rybh, // 人员id
                    date: this.form.date, // 查询日期 y-m-d
                },
            }).then((e) => {
                console.log("考勤记录", e);
                this.psatd = e.data;
            });
        },
        getNowAd() {
            // 当日考勤
            getNowAd({
                params: {
                    bzid: this.$user.ssgcxx[this.$appIndex].bzid, // 班组id
                    rybh: this.$user.ssgcxx[this.$appIndex].rybh, // 人员id
                    date: this.form.date, // 查询日期 y-m-d
                },
            }).then((e) => {
                console.log("当日考勤", e);
                if (e.data) {
                    // 格式化 his;
                    if (e.data.zwccsj) {
                        e.data.zwccsj = uni.$u.timeFormat(
                            e.data.zwccsj,
                            "hh:MM:ss"
                        );
                    }
                    if (e.data.zzjcsj) {
                        e.data.zzjcsj = uni.$u.timeFormat(
                            e.data.zzjcsj,
                            "hh:MM:ss"
                        );
                    }
                }
                this.nowAd = e.data;
            });
        },
        homeWages() {
            // 工资发放情况
            homeWages({
                params: {
                    bzid: this.$user.ssgcxx[this.$appIndex].bzid, // 班组id
                    rybh: this.$user.ssgcxx[this.$appIndex].rybh, // 人员id
                    bt: this.$moment().startOf("month").format("YYYY-MM-DD"),
                    et: this.$moment().endOf("month").format("YYYY-MM-DD"),
                },
            }).then((e) => {
                console.log("工资发放情况", e);
                this.nowWages = e.data;
            });
        },

        setApp(e) {
            this.show.showApp = false;
            this.projectIndex = e.indexs;
            uni.$u.vuex("$appIndex", e.indexs[0]);
            uni.setStorageSync("$appIndex", e.indexs[0]);
            this.init();
        },

        setYM(e) {
            this.form.stime = e.value;
            this.form.date = uni.$u.timeFormat(this.form.stime, "yyyy-mm-dd");
            this.form.ym = uni.$u.timeFormat(this.form.stime, "yyyy-mm");
            this.show.showDate = false;
            this.getPsatd();
        },
        wages() {
            if (!this.$user.ssgcxx || this.$user.ssgcxx.length <= 0) {
                return uni.$u.toast("请选择项目");
            }
            uni.$u.route({ url: "/pages/index/wages/wages" });
        },
        work() {
            if (!this.$user.ssgcxx || this.$user.ssgcxx.length <= 0) {
                return uni.$u.toast("请选择项目");
            }
            // console.log(this.$user.ssgcxx[this.$appIndex].isStartYdkq,this.$appIndex)
            if (this.$user.ssgcxx[this.$appIndex].isStartYdkq == 0) {
                return uni.$u.toast("该项目未启动移动考勤，无法使用此功能");
            }
            uni.$u.route({ url: "/pages/index/work/work" });
        },

		// 培训
        train() {
			uni.$u.toast('暂无数据源')
			return false
            if (!this.$user.ssgcxx || this.$user.ssgcxx.length <= 0) {
                return uni.$u.toast("请选择项目");
            }
            uni.$u.route({ url: "/pages/index/train/train" });
        },
		// 信用
		credit() {
			uni.$u.toast('暂无数据源')
			return false
			if (!this.$user.ssgcxx || this.$user.ssgcxx.length <= 0) {
				return uni.$u.toast("请选择项目");
			}
			uni.$u.route({ url: "/pages/index/credit/credit" });
		},



        info() {
            if (!this.$user.ssgcxx || this.$user.ssgcxx.length <= 0) {
                return uni.$u.toast("请选择项目");
            }
            uni.$u.route({ url: "/pages/index/info/info" });
        },
        signCard() {
            if (!this.$user.ssgcxx || this.$user.ssgcxx.length <= 0) {
                return uni.$u.toast("请选择项目");
            }
            if (this.$user.ssgcxx[this.$appIndex].isStartYdkq == 0) {
                return uni.$u.toast("该项目未启动移动考勤，无法使用此功能");
            }
            uni.$u.route({ url: "/pages/index/work/signCard" });
        },
        scan() {
            uni.scanCode({
                scanType: ["qrCode"],
                success: (e) => {
                    console.log(e);
                },
                fail: (e) => {
                    console.error(e);
                },
            });
        },
    },
};
</script>

<style lang="scss">
.indicator {
    @include flex(row);
    justify-content: center;

    &__dot {
        height: 4rpx;
        width: 20rpx;
        border-radius: 100rpx;
        background-color: rgba(255, 255, 255, 0.35);
        margin: 0 5rpx;
        transition: background-color 0.3s;
        &--active {
            background-color: #ffffff;
            width: 28rpx;
        }
    }
}
page {
    background-color: #fbfcfc;
}
.card {
    box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
    border-radius: 10rpx;
    background-color: #ffffff;
}
</style>
